<template>
	<view class="bottom-cart flex flex-col items-end" :style="[{'z-index': showcart?'10075000':'99'}]">
		<view class="w-[100%]">
			<slot></slot>
		</view>
		<view class="bottom-cart-box">
			<view class="flex btinone">
				<view class="relative" @click="opencart()" v-if="cartDetails.data < headtals.storeConfig.startDeliveryPrice">
					<image class="imghui" src="../../static/homeimg/huiwm.png" mode=""></image>
					<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
						<up-badge numberType="overflow" bgColor="#F12A2A"  max="99" :value="shopnums"></up-badge>
					</view>
				</view>
				<view @click="opencart()" class="relative"
					v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
					<image class="imghui" src="../../static/homeimg/huangwm.png" mode=""></image>
					<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
						<up-badge numberType="overflow" bgColor="#F12A2A"  max="99" :value="shopnums"></up-badge>
					</view>
				</view>
				<view class="money">
					<view class="nummoney text-[28rpx] leading-[38rpx]">
						￥<text class="text-[38rpx]">{{cartDetails.data.toFixed(2)}}</text>
					</view>
					<view class="relative bottom-[4rpx]">
						预估加配送费￥{{headtals.storeConfig.deliveryPrice}}元
					</view>
				</view>
			</view>
			<view @click="gobill(cartDetails.data >= headtals.storeConfig.startDeliveryPrice)" class="smallbuton"
				:class="cartDetails.data >= headtals.storeConfig.startDeliveryPrice ? 'smallbuton2':''">
				<view v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
					去结算
				</view>
				<view class="" v-else>
					￥{{headtals.storeConfig.startDeliveryPrice}} 起送
				</view>
			</view>
		</view>
	</view>
	<u-popup class="popupShow" :safeAreaInsetBottom="true" zIndex="1007500" v-if="showcart" :closeOnClickOverlay="true"
		:show="showcart" @close="showcart=false" @open="cartOpen" height="600rpx" :round="20">
		<view class="p-[30rpx]  ">
			<!-- 头部 -->
			<view class="flex  justify-between" >
				<view class="flex">
					<view class="">
						已选商品
					</view>
					<view class="text-[24rpx] flex items-end">
						(打包费￥ <text class="text-[red]">{{pagepricenum}}</text>)
					</view>
				</view>
				<view @click="delCarts" class="text-[28rpx] text-[#666666]">
					清空购物车
				</view>
			</view>
			<u-divider></u-divider>
			<!-- 购物车列表 -->
			<view class="pb-[10rpx]">
				<scroll-view style="height: 500rpx;" class="pb-[80rpx]" scroll-y="true">
					<view class="" v-for="(item,index) in cartDetails.list2" :key="index">
						<view class="flex">
							<view class="">
								<image class="w-[100rpx] h-[100rpx] rounded-[20rpx]" :src="item.goodsImages[0]">
								</image>
							</view>
							<view class="pl-[6rpx] w-[100%]">
								<view class="flex">
									<view class="ml-[20rpx] text-[28rpx] leading-[28rpx]">
										<up-text :text="item.goodsName"></up-text>
									</view>
								</view>
								<view class="pl-[22rpx] salesNum felx justify-between mounys mt-[8rpx] w-[100%]">
									<view>
										<view class="flex flex-nowrap mr-[20rpx]"
											v-if="item.batchingIds!==null || item.weight || item.goodsStock.suk ">
											<view class="text-[24rpx] text-[#999999]">
												<text v-if="item.weight">{{item.weight}}、</text> <text
													v-if="item.batchingIds!==null" >
													<text class="ml-[10rpx]" v-for="(item,index) in item.batchingIds">{{item.batchingName}}</text>
													</text>
												<text v-if="item.goodsStock.suk" class="ml-[10rpx]"> {{item.goodsStock.suk}}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="flex justify-between mt-[10rpx] ml-[20rpx]">
									<view class="text-[red]">
										<text class="text-[24rpx]">￥</text>{{item.subtotalPrice}}
									</view>
									<view class="flex items-end">
										<view class="" v-show="item.num>0" @click="cartjian(item,index)">
											<view class="jaddcar">
												<u-icon name="minus" color="#FE861C" size="12"></u-icon>
											</view>
										</view>
										<view class="numbershop" v-if="item.num>0">
											{{item.num}}
										</view>
										<view class="addcar" @click="cartadd(item,index)">
											<view class="">
												<u-icon name="plus" color="#fff" size="12"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider lineColor="#efefef"></u-divider>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="button" style="z-index: 99;">
				<view class="flex btinone">
					<view class="relative" v-if="cartDetails.data < headtals.storeConfig.startDeliveryPrice">
						<image class="imghui" src="../../static/homeimg/huiwm.png" mode=""></image>
						<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
							<up-badge numberType="overflow" :type="type" max="99" :value="shopnum"></up-badge>
						</view>
					</view>
					<view  class="relative"
						v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
						<image class="imghui" src="../../static/homeimg/huangwm.png" mode=""></image>
						<view class="absolute top-0 right-0 " v-if="cartDetails.list2.length>0">
							<up-badge numberType="overflow" :type="type" max="99" :value="shopnum"></up-badge>
						</view>
					</view>
					<view class="money">
						<view class="nummoney">
							￥{{cartDetails.data.toFixed(2)}}
						</view>
						<view class="">
							预估加配送费￥{{headtals.storeConfig.deliveryPrice}}元
						</view>
					</view>
				</view>
				<view @click="gobill(cartDetails.data >= headtals.storeConfig.startDeliveryPrice)" class="smallbuton"
					:class="cartDetails.data >= headtals.storeConfig.startDeliveryPrice ? 'smallbuton2':''">
					<view v-if="cartDetails.data >= headtals.storeConfig.startDeliveryPrice">
						去结算
					</view>
					<view class="" v-else>
						￥{{headtals.storeConfig.startDeliveryPrice}} 起送
					</view>
				</view>
			</view> -->
		</view>
	</u-popup>
</template>

<script setup>
	import {
		storenamedetal,
		bulisliststore,
		applystorestore,
		storebalance,
		storecartdetals,
		storecart,
		gooddetals,
		goodscatelist,
		deleteGoods,
		decreaseGoods,
		goodattr,
		storecollect,
		storecollectnum,
		storevlueuserbills,
		storeconcern,
		vipaccount
	} from "@/api/home.js"
	import {
		ref,
		defineProps,
		reactive,
		onMounted
	} from "vue"

	const props = defineProps({
		headtals: {
			default: () => {},
			type: Object,
		},
		shopnums: {
			default: 0,
			type: Number,
		},
		pagepricenum: {
			default: 0,
			type: Number,
		},
		cartDetails: {
			default: () => {},
			type: Object,
		},
		results: {
			default: () => {},
			type: Object,
		},
	})
	let showcart = ref(false)
	let opencart = () => {
		if (props.cartDetails.list2.length > 0) {
			showcart.value = true
		}
	}
	const emit = defineEmits(['changenum']);
	let gobill = (e) => {
		if (e && props.cartDetails.list2.length>0) {
			switch(false){
						 case props.cartDetails.list2.length>0 :
						 uni.showToast({
						 	icon:"none",
							title:'未选择商品'
						 })
						 return;
			}
			uni.navigateTo({
				url: '/page_order/submitanorder/submitanorder?id=' + props.headtals.id + '&storenName=' + props
					.headtals.storeName
					.value + '&deliveryType=' + props.headtals.storeConfig.deliveryType + '&deliveryPrice=' +
					props.headtals.storeConfig.deliveryPrice
			})
		}
	}
	//商品数量
	const shopnum = ref(0)
	const cardetaslist = () => {
		storecartdetals({
			storeId: props.headtals.id
		}).then(res => {
			if (res.code == 200 && res.result.cart !== null) {
				props.cartDetails.data = res.result.cart.totalAmount
				props.cartDetails.list = res.result.cart
				props.cartDetails.list2 = res.result.cart.data
				shopnum.value = 0
				res.result.cart.data.forEach(item => {
					shopnum.value += item.num
				})
			} else {
				props.cartDetails.data = 0
				props.cartDetails.list2 = []
				props.cartDetails.list.data = []
				// uni.hideLoading();
			}

		}).catch(err => {
			console.log(err)
		})
	}
	//弹窗增加购物车
	let cartadd = (item) => {
		item.num++
		item.storeId = props.headtals.id
		storecart({
			storeId: props.headtals.id,
			goods: props.cartDetails.list2
		}).then(res => {
			if (res.code == 200) {
				// cardetaslist()
				emit('changenum', "11111111")
			}
		})
	}
	//减少购物车商品
	let cartjian = (item,indexs) => {
		if (item.num > 0) {
			item.num--
		}
		if (item.num == 0) {
			props.cartDetails.list2.forEach((items, index) => {
				if (item.id == items.id && index==indexs) {
					props.cartDetails.list2.splice(index, 1)
				}
			})
		}
		switch (true) {
			case props.cartDetails.list2.length < 1:
				delcart()
				return;
		}
		if(props.cartDetails.list2.length > 0){
			storecart({
				storeId: props.headtals.id,
				goods: props.cartDetails.list2
			}).then(res => {
				if (res.code == 200) {
					// cardetaslist()
					emit('changenum', "11111111")
				}
			})
		}
	
	}
	//清空购物车
	let delCarts = ()=>{
		console.log('点击');
		uni.showModal({
			title: '温馨提示',
			content: '是否要清空购物车吗？',
			success: function(res) {
				if (res.confirm) {
				delcart()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	let delcart = () => {
		deleteGoods({
			storeId: props.headtals.id
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "购物车已清空",
					icon: 'none'
				})
				// cardetaslist()
				// getshoplist()
				showcart.value = false
				emit('changenum', "11111111")
			}
		}).catch(err => {
			console.log("异常", err)
		})
	}
</script>

<style scoped lang="scss">
	.bottom-cart {
		position: fixed;
		width: calc(100% - 40rpx);
		bottom: 40rpx;
		left: 20rpx;
		z-index: 555;
		
		.bottom-cart-box {
			width: 100%;
			height: 98rpx;
			background: #383838;
			border-radius: 49rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.smallbuton {
				margin-right: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background-color: #555555;
				padding: 16rpx 30rpx;
				text-align: center;
				border-radius: 36rpx;
			
			}
			
			.smallbuton2 {
				margin-right: 20rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background-color: #FE861C;
				padding: 16rpx 30rpx;
				text-align: center;
				border-radius: 36rpx;
			
			}
			
			.btinone {
				padding-left: 40rpx;
			}
			
			.imghui {
				width: 88rpx;
				height: 66rpx;
			}
			
			.money {
				padding-left: 24rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			
				.nummoney {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}
			}
		}
	}

	.salesNum {
		display: flex;
		justify-content: space-between;
	}

	.mounys {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.nummoyneys {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FB2A2A;
	}

	.nummoyneysasd {
		color: #FB2A2A;
		font-weight: bold;
	}

	.addcar {
		width: 44rpx;
		height: 44rpx;
		background-color: #FE861C;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.addcarsa {
		background-color: #FE861C;
		padding: 6rpx 10rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 8rpx;
	}

	.jaddcar {
		width: 42rpx;
		height: 42rpx;
		background-color: #fff;
		border: 2px solid #FE861C;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.numbershop {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 0 20rpx;
	}
</style>